<template>
  <div class="addCamera">
    <el-button v-if="showBtn" @click="handleClick" v-bind="$attrs">
      <slot>查看</slot>
    </el-button>
    <el-dialog class="d1" :title="title" :visible.sync="visible" append-to-body width="500px" @close="onClose">
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作模块：">{{ form.title }} </el-form-item>
            <el-form-item label="登录信息：">{{ form.businessType }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
            <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求参数：" style="margin-bottom: 0px"></el-form-item>
          </el-col>
          <el-col :span="24" style="margin-bottom: 18px">
            <el-tree :data="form.operParam" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作状态：">
              <div v-if="form.status === 0">正常</div>
              <div v-else-if="form.status === 1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getFormatTime,
    businessType,
    getRuturnResult,
    getMethod,
    getOperParam
  } from '@/api/format.js';

  /* 客户详情写新跟进 */
  export default {
    props: {
      showBtn: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: false,
        visible: false,
        title: "操作日志详细",
        form: {},
        // 定义树形控件节点
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      onClose() {
        // this.$refs["form"].clearValidate();
      },
      handleClick(info) {
        let self = this;
        self.form = {
          ...info
        };
        self.form.jsonResult = getRuturnResult(self.form.jsonResult); // 格式化返回参数
        self.form.operTime = getFormatTime(self.form.operTime); // 格式化操作时间
        self.form.method = getMethod(self.form.method); // 过滤操作方法
        console.log(self.form.operParam);
        self.form.operParam = getOperParam(self.form.operParam); // 树形节点
        console.log(self.form.operParam);
        self.form.businessType = businessType(self.form.businessType); // 登录信息
        self.visible = true;
      },
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>
<style lang="scss">
.el-tree-node {
  margin: 5px 0px;
}
.el-tree-node__label {
  word-break: normal !important;
  width: auto !important;
  display: block !important;
  white-space: pre-wrap !important;
  word-wrap : break-word !important;
  overflow: hidden !important;
  line-height: 1.5;
}
</style>
